<template>
    <div class="root-div" style="color: #fff;">
        <div class="form-div" style="padding: 50px 0px 50px 450px; ">
            <el-form ref="form" :model="form" label-width="200px">
                <el-form-item label="工资区间 (eg: 12k-15k)" style="width: 700px;" class="font-style">
                    <el-input v-model="form.salary_desc"></el-input>
                </el-form-item>
                <el-form-item label="所在城市">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option v-for="item in reback.cityList" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="相关编程语言">
                    <el-select v-model="form.lang" placeholder="请选择活动区域">
                        <el-option v-for="item in reback.langList" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">开始推荐！</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>


        <!-- 表格组件 -->
        <div v-if="showTable" class="back-table" style="padding: 20px 150px 0px 150px ;">
            <div class="info" style="margin-bottom: 20px;">推荐职位如下：</div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="brand_name" label="公司名称" width="220">
                </el-table-column>
                <el-table-column prop="job_name" label="职位名称" width="310">
                </el-table-column>
                <el-table-column prop="salary_desc" label="薪资范围" width="160">
                </el-table-column>
                <el-table-column prop="city_name" label="所在区域" width="160">
                </el-table-column>
                <el-table-column prop="skills" label="技术栈" width="620">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getRecommendByKmeans, getRecommendDict } from '@/api/base.js';

export default {
    data() {
        return {
            form: {
                salary_desc: '',
                region: '',
                lang: '',
            },
            // 回显数据
            reback: {},
            tableData: [],  // 存储返回的推荐职位
            showTable: false
        }
    },
    mounted() {
        getRecommendDict().then(res => {
            this.reback = res.data;
            console.log(this.reback)
        })
    },
    methods: {
        onSubmit() {
            console.log(this.form);
            getRecommendByKmeans(this.form.salary_desc, this.form.region, this.form.lang)
                .then(res => {
                    console.log(res)
                    this.tableData = res.data;

                    if (res.data.length != 0) {
                        this.showTable = true   // 展示表格
                    }
                })
        }
    }
}
</script>


<style>
/* elementui 改Lable颜色，全局CSS去掉scoped */
.el-form-item__label {
    color: #fff
}
</style>